<template>
  <div class="step-content">
    <el-form ref="pictureSetForm" :model="EduxcloudCourseLesson" :rules="pictureRules" label-width="150px" class="form-style">
      <el-form-item v-if="sonSteps===1" label="标题名称" prop="title">
        <el-input v-model="EduxcloudCourseLesson.title" placeholder="请输入标题" style="width:600px;"/>
      </el-form-item>
      <el-form-item v-if="sonSteps===1" label="内容">
        <tinymce id="editor" v-model="EduxcloudCourseLesson.content" :init="init" style="width:600px;"/>
      </el-form-item>
      <el-form-item v-if="sonSteps===2" label="完成条件">
        <span>看到最后</span>
      </el-form-item>
    </el-form>
    <div class="step-btn">
      <el-button v-if="sonSteps===1" type="info" @click="goStep0">上一步</el-button>
      <el-button v-if="sonSteps===1" type="info" @click="goStep2">下一步</el-button>
      <el-button v-if="sonSteps===2" type="info" @click="goStep1">上一步</el-button>
      <el-button v-if="sonSteps===2" type="primary" @click="submitSave">保 存</el-button>
    </div>
  </div>
</template>
<script>
  import Tinymce from '@/components/Tinymce' // 富文本组件
  import {addCourseLesson} from '@/api/subject/course_lesson';
  import{getTenantId,getUserId}from'@/utils/auth';
  export default {
    components: {
      Tinymce
    },
    props: {
      steps: {
        type: Number,
        default: 1
      },
      'home': Object
    },
    data() {
      return {
        sonSteps: this.steps,
        EduxcloudCourseLesson: {
          title: '',
          courseId: '',
          chapterId: '',
          content: ''
        },
        pictureRules: {
          title: [{required: true, message: '请输入标题', targger: 'blur'}]
        },
        init: {
          selector: '#editor',
          language: 'zh_CN',
          height: 100
        }
      }
    },
    created() {
    },
    methods: {
      goStep0() {
        this.$emit('nowStep0')
      },
      goStep1() {
        this.sonSteps = 1;
        this.$emit('nowStep1')
      },
      goStep2() {
        this.$refs.pictureSetForm.validate((valid) => {
          if (valid) {
            this.sonSteps = 2;
            this.$emit('nowStep2')
          } else {
            return false
          }
        })
      },
      submitSave() {
        this.$refs['pictureSetForm'].validate((valid) => {
          if (valid) {
            console.log("picture.vue acceptEduxcloudCourseId:" + this.home.acceptEduxcloudCourseId);
            console.log("picture.vue chapterId:" + this.home.chapterId);
            this.EduxcloudCourseLesson.courseId = this.home.acceptEduxcloudCourseId;
            this.EduxcloudCourseLesson.chapterId = this.home.chapterId;
            this.EduxcloudCourseLesson.tenantId = getTenantId();
            this.EduxcloudCourseLesson.userId = getUserId();
            addCourseLesson(this.EduxcloudCourseLesson).then(response => {
              if (response.code === 200) {
                this.EduxcloudCourseLesson = {};
                this.$notify({title: '成功', message: '创建成功', type: 'success', duration: 2000});
                this.$emit('saveInfo')
              }
            })
          }
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .step-content {
    min-height: 50px;

    .form-style {
      border-bottom: 1px solid #eee;
      margin-top: 20px;
      padding: 0 20px;
    }

    .step-btn {
      margin-top: 20px;
      text-align: right;
    }
  }
</style>
